<!-- Military Youth Day Spa (Slideshow Index 0) -->
<div class="past-image-vertical slideshow-container">
    <div class="mySlides5"> ... </div>
    <!-- Note: changed flightSlides to plusSlides and added the index 0 -->
    <a class="prev" onclick="plusSlides(-1, 0)">❮</a>
    <a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>

<!-- Holiday Day Spa (Slideshow Index 1) -->
<div class="past-image-vertical slideshow-container">
    <div class="mySlides2"> ... </div>
    <!-- Note: added the index 1 -->
    <a class="prev" onclick="plusSlides(-1, 1)">❮</a>
    <a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>

// Array to keep track of the current slide for each slideshow
// Add more zeros if you add more slideshows (e.g., [0, 0, 0])
let slideIndex = [1, 1]; 

// Class names of your slide groups
let slideId = ["mySlides5", "mySlides2"]; 

// Initialize all slideshows
showSlides(1, 0);
showSlides(1, 1);

// Function called by the Prev/Next buttons
function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  
  // Hide all slides in THIS specific slideshow
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  
  // Show the active slide
  x[slideIndex[no]-1].style.display = "block";  
}

/* Hide slides by default */
.mySlides5, .mySlides2 {
  display: none;
}

/* Ensure the container is positioned for the buttons */
.slideshow-container {
  position: relative;
  max-width: 100%;
}

/* Style for buttons (if not already styled) */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  background-color: rgba(0,0,0,0.5);
  user-select: none;
}

.next { right: 0; }
.prev { left: 0; }

<!-- Inside the 2025 Military Youth Day Spa section -->
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>

<!-- Inside the 2024 Holiday Day Spa section -->
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>

<script>
// slideIndex tracks the current image for each slideshow
let slideIndex = [1, 1]; 
// slideId matches the class names you used in your HTML
let slideId = ["mySlides5", "mySlides2"]; 

// Initialize both slideshows on page load
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}
</script>

// DELETE: var slideIndex = 1;
// ADD: This tracks multiple indices at once
let slideIndex = [1, 1]; // One '1' for each slideshow on your page

// ADD: This lists the specific class names you used in your HTML
let slideId = ["mySlides5", "mySlides2"]; 

// Initial call to start both slideshows
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  
  // Resets to beginning or end if you go past the total images
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  
  // ONLY hides images within this specific slideshow group
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  
  // Displays the current image
  x[slideIndex[no]-1].style.display = "block";  
}

let slideIndex = [1, 1, 1]; // Add a '1' for every slideshow you have.
let slideId = ["mySlides5", "mySlides2", "mySlides-Next"]; // Add the specific class name for each slideshow

// Start every slideshow
for (let i = 0; i < slideId.length; i++) {
  showSlides(1, i);
}

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);

  // Wrap around logic
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}

  // Hide all images in this specific group
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }

  // Show the current active image
  x[slideIndex[no]-1].style.display = "block";
}

.mySlides5, .mySlides2, .mySlides-Next {
  display: none;
}

<script>
// 1. ADD A '1' FOR EVERY SLIDESHOW ON YOUR PAGE
// If you have 5 slideshows, it should look like [1, 1, 1, 1, 1]
let slideIndex = [1, 1]; 

// 2. ADD THE EXACT CLASS NAMES YOU USED IN YOUR HTML
// Ensure these match the class names of your slides (e.g., mySlides5, mySlides2)
let slideId = ["mySlides5", "mySlides2"]; 

// Initialize all slideshows on load
for (let i = 0; i < slideId.length; i++) {
  showSlides(1, i);
}

// Function called by the Prev/Next buttons
function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

// The core function that hides/shows the correct images
function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  
  // Wrap around logic (goes from last image back to first)
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  
  // Hides all images in THIS specific slideshow only
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  
  // Displays the current image
  if (x.length > 0) {
    x[slideIndex[no]-1].style.display = "block";  
  }
}
</script>

<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>

<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>

<script>
// Each '1' in this array tracks the current slide of a different slideshow
let slideIndex =; 

// These must match the class names used in your HTML divs
let slideId = ["mySlides5", "mySlides2"]; 

// Initialize all slideshows on page load
for (let i = 0; i < slideId.length; i++) {
  showSlides(1, i);
}

// This function is triggered by your button clicks
function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  
  // If you go past the last image, go back to the first
  if (n > x.length) {slideIndex[no] = 1}    
  // If you go before the first image, go to the last
  if (n < 1) {slideIndex[no] = x.length}
  
  // Hide all images in this specific slideshow group
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  
  // Show the active image
  if (x.length > 0) {
    x[slideIndex[no]-1].style.display = "block";  
  }
}

// Your existing Nav function (keep this if you are using it)
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

.mySlides5, .mySlides2 {
  display: none;
}

<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>

<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>

<script>
// 1. Array to track the current slide of EACH slideshow independently
// Add a '1' here for every slideshow on your page.
let slideIndex =; 

// 2. Exact class names of your slide divs
// List every class you used in your HTML (mySlides5, mySlides2, etc.)
let slideId = ["mySlides5", "mySlides2"]; 

// Initialize all slideshows
for (let i = 0; i < slideId.length; i++) {
  showSlides(1, i);
}

// Function called by your Prev/Next buttons
function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  
  // Wrap logic: goes back to first slide if you hit 'next' on the last one
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  
  // Hide all images in ONLY this specific slideshow group
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  
  // Display the active image
  if (x.length > 0) {
    x[slideIndex[no]-1].style.display = "block";  
  }
}
</script>

/* Add the class name for every slideshow you have here */
.mySlides5, .mySlides2 {
  display: none;
}

<script>
// Array to keep track of the current slide for each of your 4 slideshows
let slideIndex = [1, 1, 1, 1]; 

// Array of the class names you used in your HTML
let slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides5"]; 

// Initialize all slideshows on page load
for (let i = 0; i < slideId.length; i++) {
  showSlides(1, i);
}

// Function called by the arrows in your HTML
function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  
  // If no images are found for a class, stop the function to avoid errors
  if (x.length === 0) return;

  // Wrap logic: back to first slide or jump to last
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  
  // Hide all images in this specific slideshow
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  
  // Show the current active image
  x[slideIndex[no]-1].style.display = "block";  
}

// Your existing mobile menu function
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

/* Hide all slides by default */
.mySlides1, .mySlides2, .mySlides3, .mySlides5 {
  display: none;
}

<script>
// One '1' for each of your 6 slideshows
let slideIndex = [1, 1, 1, 1, 1, 1]; 

// List every class name you used in your HTML in order
let slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5", "mySlides6"]; 

// Initialize all 6 slideshows
for (let i = 0; i < slideId.length; i++) {
  showSlides(1, i);
}

// All buttons (prev/next) should now call THIS function
function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  if (x.length === 0) return; // Safety check
  
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no]-1].style.display = "block";
}
</script>

<script>
// Tracks the current slide for all 6 slideshows
let slideIndex = [1, 1, 1, 1, 1, 1]; 

// The class names used in your HTML, in order (Index 0 to 5)
let slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5", "mySlides6"]; 

// Initialize all slideshows on load
for (let i = 0; i < slideId.length; i++) {
  showSlides(1, i);
}

// Every button on your page will now call this one function
function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  if (x.length === 0) return; // Prevents errors if a class is missing

  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex[no]-1].style.display = "block";
}
</script>

.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6 {
  display: none;
}